<template>
</template>
<script>
export default {
  name:'Remove',
  data() {
    return {
      id:[]
    }
  },
  created(){
    // 获取id数据
    let arr=this.$route.query.id
    if(arr){
      arr.forEach(item => {
        this.id.push(item.id)
      })
    }
    // 执行删除操作
    this.handleRemove()
  },
  methods:{
    // 删除axios发送
    deleteRoleData(){
      this.axios.delete('/api/role/delete',{
      params:{
        id:this.id
      },
      headers:{'token':this.$store.state.token}
      }).then((res)=>{ 
        // 删除成功
        this.message('删除成功','success')
      }).catch((error)=>{
        this.message('服务器忙，请稍后重试','error')
      })
    },
    // 删除弹出页面
    handleRemove(){
      const h = this.$createElement;
      this.$msgbox({
        title: '删除确认',
        message: h('p', null, [
          h('span', null, '您确定删除该项吗？'),
          h('span', { style: 'color: red' }, '（删除之后不可恢复）')
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          // action、instance、done 都是组件自带的
          // action标记你当前的操作——confirm（确认）
          if (action === 'confirm') {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = '删除中...';
            setTimeout(() => {
              this.deleteRoleData()              
              done();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
                this.$router.go(-1)
              }, 300);
            }, 500);
          } else {
            done();
          }
        }
      }).then(action => {//回调函数
        
      }).catch(() => {
        this.message('删除失败','error')
      })
    },
    // 消息提示
    message(msg,type){
      this.$message({
        message:msg,
        type
      })
    }
  }
}
</script>
<style scoped>

</style>


